<!--
 * @Author: Archy
 * @Date: 2022-08-01 22:28:05
 * @LastEditors: Archy
 * @LastEditTime: 2022-08-02 00:04:45
 * @FilePath: \ant-design-vue-pro\docs\example\tablePro\tableProArraySample.vue
 * @description: 
-->
<template>
  <div :style="{ padding: '20px' }">
    <ConfigProvider :locale="zhCN">
      <TablePro :columns="columns" :data="getData" v-model:dataSource="data">
      </TablePro>
    </ConfigProvider>
  </div>
</template>
<script setup lang="ts">
import TablePro from '../../../es/components/tablePro/tablePro';
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { ColumnsProType } from '../../../types/tablePro/tablePro'
import { ConfigProvider } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';

const columns = ref<ColumnsProType>([
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
  { title: '地址', dataIndex: 'address' },
])
const data = ref([])
const getData = (p: any) => {
  return fetch(
    `http://rap2api.taobao.org/app/mock/294153/getTableData?pageSize=${p.pageSize}&pageNo=${p.pageNo}`
  ).then(async (res) => {
    const ress = await res.json()
    return ress.obj.list
  })
}
</script>
<style lang='less' scoped>
</style>